<template>
  <view class="modifyPhone">
    <u-toast ref="uToast"></u-toast>
    <view class="Form">
      <view class="flex_al_cen_ju_bet">
        <view>原手机号</view>
        <view>{{ userMobile.substring(0, 3) + '****' + userMobile.substring(userMobile.length - 4) }}</view>
      </view>
      <view class="flex_al_cen_ju_bet">
        <view>原手机号</view>
        <u-input placeholder="请输入原手机号" inputAlign="right" border="none" type="phone" v-model="user.Oldphone"></u-input>
      </view>
      <view class="flex_al_cen_ju_bet">
        <view>新手机号</view>
        <u-input placeholder="请输入新手机号" inputAlign="right" border="none" type="phone" v-model="user.Newphone"></u-input>
      </view>
      <view class="flex_al_cen_ju_bet">
        <view>验证码</view>
        <view>
          <u-input :customStyle="{
            padding: '0px',
          }" inputAlign="right" type="number" placeholder="请输入短信验证码" border="bottom" v-model="user.code">
            <template #suffix>
              <u-code ref="uCode" @change="codeChange" :seconds="60" :keepRunning="true" changeText="x秒重新获取"
                unique-key="Phone"></u-code>
              <text @tap="getCode" :text="tips" style="color:#AAAAAA;   font-size: 30rpx;  line-height: 35rpx;"
                class="u-page__code-text">{{
                  tips }}</text>
              <!-- <u-button :customStyle="{
                'margin-left': '15rpx',
                width: '140rpx',
                height: '50rpx',
              }" color="#FF0000" @tap="getCode" :text="tips" type="primary" size="mini"></u-button> -->
            </template>
          </u-input>
        </view>
      </view>
    </view>
    <view class="confirmChange" @click="confirmChange">确认修改</view>
  </view>
  <u-toast ref="uToast"></u-toast>
</template>
<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from "vue";
import settingPhone from "@/Hooks/Wode/settingPhone";
const { proxy } = getCurrentInstance() as any;
const { oldMoblied,
  userMobile,
  confirmChange,
  codeChange,
  tips,
  user,
  getCode } = settingPhone(proxy)
</script>
<style lang="scss" scoped>
page {
  background: $bg_F6;
  font-size: $fontS_24;
}

.modifyPhone {
  padding: 30rpx;

  .Form {
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    background: $bg_fff;
    padding: 0 18rpx;

    >view {
      padding: 26rpx 0;
      border-bottom: 1px solid rgba(170, 170, 170, 0.2);

      &:last-child {
        border: none;
      }
    }
  }

  .confirmChange {
    text-align: center;
    margin: 500rpx auto 150rpx;
    width: 550rpx;
    height: 78rpx;
    line-height: 78rpx;
    color: $color_fff;
    background: $color_def;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }
}
</style>
